<?php

/**
 * [2025]
 *
 * @package 2025
 * @author shean
 * @version 2025-09
 * @link http://doubao.life
 */
ini_set('opcache.revalidate_freq', 0);
if (!defined('__TYPECHO_ROOT_DIR__'))
    exit;
$data = getBingToday();
$cate = array_reverse($data['month']);
?>
<!DOCTYPE HTML>
<html lang="zh-cn">

    <head><?php $this->need('header.php'); ?></head>

    <body class="bg-tran">
        <div class="container">
            <div class="columns px-0">
                <?php if ($this->have()): ?>
                    <?php while ($this->next()): ?>
                        <div class="column col-12">
                            <?php $cover = getCoverList($this); ?>
                            <?php if (count($cover) < 1): ?>
                                <div class="text-center">图册内容需要上传图片才能显示</div>
                            <?php else: ?>
                                <div onclick="handleItemClick(this)" class="camera-item animate__animated"
                                    data-url="<?php $this->permalink(); ?>" data-title="<?php $this->title(); ?>"
                                    data-lng="<?php echo $this->fields->mapLng; ?>" data-lat="<?php echo $this->fields->mapLat; ?>"
                                    data-desc="<?php $this->fields->postDesc(); ?>" data-date="<?php $this->date('Y年m月d日'); ?>">

                                    <div class="columns">
                                        <div class="column col-12 px-0">
                                            <div class="d-flex a-center" style="margin-bottom:10px;">
                                                <div class="f1 text-ellipsis text-bold -title">
                                                    <?php $this->title(); ?>
                                                </div>
                                                <div class="-date">
                                                    <?php $this->date('Y年m月d日'); ?>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="hide-sm columns" style="border-radius: var(--rads);overflow: hidden;">
                                        <?php foreach ($cover as $index => $p): ?>
                                            <?php if ($index <= 3): ?>
                                                <div class="column px-0 col-sm-12">
                                                    <div class="-camera-p-item" style="background-image:url('<?php echo $p; ?>');"></div>
                                                </div>
                                            <?php endif; ?>
                                        <?php endforeach; ?>
                                    </div>

                                    <div class="show-sm hide-sm columns" style="border-radius: var(--rads);overflow: hidden;">
                                        <?php foreach ($cover as $index => $p): ?>
                                            <?php if ($index <= 0): ?>
                                                <div class="column px-0 col-sm-12">
                                                    <div class="-camera-p-item" style="background-image:url('<?php echo $p; ?>');"></div>
                                                </div>
                                            <?php endif; ?>
                                        <?php endforeach; ?>
                                    </div>
                                </div>
                            <?php endif; ?>
                        </div>
                    <?php endwhile; ?>
                <?php else: ?>
                    <div class="column col-6 col-sm-12" style="margin:0 auto;">
                        <div class="text-center d-flex"
                            style="margin:20px 10px;height:calc(100vh - 100px);align-items: center;justify-content: center;">
                            <div>
                                <div class="-icon -e404 -super" style="margin:0 auto;"></div>
                                <div class="mt-2 text-large text-center">暂无内容</div>
                            </div>
                        </div>
                    </div>
                <?php endif; ?>
            </div>
        </div>
        <div class="columns px-0">
            <div class="column col-12">
                <?php $this->pageNav('←', '→'); ?>
            </div>
        </div>

        <script>
            (() => {
                const parent = window.parent.length
                if (parent === 0) location.href = '/'

                window.resize = () => {
                    resetItemHeight()
                }

                window.theme = getSystemTheme()
                document.body.setAttribute('data-theme', getSystemTheme());
                window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
                    const newTheme = event.matches ? 'dark' : 'light';
                    document.body.setAttribute('data-theme', newTheme);
                });

                //initItemAni()
                resetItemHeight()
            })()

            function resetItemHeight() {
                //获取窗口高度
                let height = window.innerHeight;
                const item = document.querySelectorAll('.h')
                for (let i = 0; i < item.length; i++) {
                    item[i].style.height = ((height / 2) - 195) + 'px';
                }
            }

            function getSystemTheme() {
                if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
                    return 'dark';
                } else {
                    return 'light';
                }
            }

            function initItemAni() {
                //给页面中的列表项添加鼠标划过动画
                //travel-item
                let travelItem = document.querySelectorAll('.camera-item')
                for (let i = 0; i < travelItem.length; i++) {
                    travelItem[i].addEventListener('mouseover', () => {
                        travelItem[i].classList.add('animate__tada')
                    })
                    travelItem[i].addEventListener('mouseleave', () => {
                        travelItem[i].classList.remove('animate__tada')
                    })
                }
            }

            //点击项目
            function handleItemClick(e) {
                const val = {
                    title: e.dataset.title,
                    url: e.dataset.url,
                    lat: e.dataset.lat,
                    lng: e.dataset.lng,
                    data: e.dataset.date,
                    desc: e.dataset.desc
                }
                window.parent.postMessage({
                    act: 'viewPost',
                    val: val
                }, '*');
            }
        </script>
    </body>

</html>